<template>
  <div class="map" id="map"></div>
</template>
<script setup>
import {onMounted} from "vue";

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {fromLonLat, get as getProjection, transform, transformExtent} from 'ol/proj.js';
import {getTopLeft, getWidth} from 'ol/extent.js';

onMounted(() => {
  initMap();

});

function initMap() {
  const resolutions = [156367.79197931694, 78183.89598965847, 39091.947994829236, 19545.973997414672, 9772.986998707349, 4886.493499353674, 2443.246749676835, 1221.623374838416, 610.8116874192093, 305.40584370960335, 152.7029218548022, 76.3514609274011, 38.17573046370042, 19.087865231850262, 9.543932615925145, 4.771966307962573, 2.3859831539812832, 1.1929915769906416, 0.5964957884953221, 0.29824789424766107, 0.14912394712383054];
  console.log(23, resolutions.length);
  const extent = [-5123200.0, -3.0028054746705137E7, 3.490695474670514E7, 1.00021E7];
  const origin = [-5123200.0, 1.00021E7];
  const layerName = "zz_image";
  const gridsetName = "EPSG:4547_zz_image";
  const matrixIds = [];
  for (let i = 0; i < resolutions.length; i++) {
    matrixIds.push(`${gridsetName}:${i}`)
  }
  console.log(32, matrixIds);

  const map = new Map({
    layers: [
      new TileLayer({
        source: new WMTS({
          // http://192.168.1.137:8080/geoserver/ows?service=WFS&version=1.1.0&request=GetCapabilities
          url: 'http://192.168.1.137:8080/geoserver/gwc/service/wmts', // 替换为实际的 WMTS 服务 URL
          layer: layerName, // 图层名
          matrixSet: gridsetName, // 瓦片矩阵集
          format: 'image/png', // 格式
          tileGrid: new WMTSTileGrid({
            // origin: [-180.0, 90.0],
            origin: origin,
            resolutions: resolutions,//决议。每个分辨率的数组索引都需要与缩放级别相匹配。这意味着，即使配置了minZoom，分辨率数组的长度也将为maxZoom+1
            // 根据你的 WMTS 服务设置缩放级别和范围
            tileSize: [256, 256], // 瓦片大小
            matrixIds: matrixIds,//矩阵ID。此数组的长度需要与分辨率数组的长度相匹配。
          }),
          style: '',
          projection: 'EPSG:4547'
        }),
      }),
    ],
    target: 'map',
    view: new View({
      center: fromLonLat([113.11832, 27.81395]),
      zoom: 6,
      // extent,
    }),
  });
  map.getView().fit([353598.32227930747, 3006258.1767470683, 480871.4206368345, 3106334.1560291206], map.getSize());
}
</script>
<style scoped>
.map {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
}
</style>
